<template>
  <div class="main-menu">
    <van-tabbar v-model="active">
      <van-tabbar-item name="index" to="/index">首页
        <template #icon="props">
          <img v-if="props.active" src="@/assets/img/shouye1@2x.png" />
          <img v-else src="@/assets/img/shouye2@2x.png" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="consultIndex" to="/consultIndex">资讯
        <template #icon="props">
          <img v-if="props.active" src="@/assets/img/zixun1@2x.png" />
          <img v-else src="@/assets/img/zixun2@2x.png" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item  name="walletIndex" to="/walletIndex">钱包
        <template #icon="props">
          <img v-if="props.active" src="@/assets/img/qianbao1@2x.png" />
          <img v-else src="@/assets/img/qianbao2@2x.png" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="myCenter" to="/myCenter">我的
        <template #icon="props">
          <img v-if="props.active" src="@/assets/img/wode1@2x.png" />
          <img v-else src="@/assets/img/wode2@2x.png" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active:'index'
    }
  },
  watch: {
    $route(val) {
      this.active=this.$route.name
    }
  },
  created(){
    this.active=this.$route.name
  }
};
</script>

<style>
.van-tabbar-item--active{
  color: #00C8E7;
}
</style>
